import React, { useMemo, useState } from "react"
import { Button, Card, Descriptions, Form, Input, message } from "antd"
import { userType } from "@/types"
import { http } from "@/utils/http"
import { connect, ConnectedProps } from "react-redux"
import { updateUserInfo } from "@/store/actions/user"

type Props = ConnectedProps<typeof connector>

const UserCenter: React.FC<Props> = (props) => {
  const { userInfo, updateUserInfo } = props

  const [submitBtn, setSubmitBtn] = useState({ text: "提交", loading: false })
  const roleName = useMemo(() => {
    return userInfo.role === 1 ? "超级管理员" : userInfo?.role === 2 ? "省管理员" : userInfo?.role === 3 ? "市管理员" : "县管理员"
  }, [userInfo.role])

  const [form] = Form.useForm()

  /**
   * 修改用户信息
   * @param values 表单数据
   * @returns void
   */
  const submitForm = async (values: { username: string; password: string; newPassword: string; confirmPassword?: string }) => {
    if (values.newPassword !== values.confirmPassword) return message.error("两次密码输入不一致")
    setSubmitBtn({ text: "提交中", loading: true })
    delete values.confirmPassword
    try {
      const { data: res } = await http.post("/modify/user/information", { ...values })
      if (res.message === "密码错误！") return message.error("密码错误")
      sessionStorage.setItem("token", res.data)

      // store.dispatch({ type: "update", data: { username: values.username, password: values.password } })

      updateUserInfo({ username: values.username, password: values.password })
      message.success("修改成功")
    } catch {
      message.error("服务器异常")
    } finally {
      setSubmitBtn({ text: "提交", loading: false })
    }
  }

  return (
    <div style={{ display: "flex" }}>
      <Card style={{ marginRight: 40, boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px" }} title="管理员信息">
        <Descriptions bordered>
          <Descriptions.Item label="uid">{userInfo.uid}</Descriptions.Item>
          <Descriptions.Item label="用户名">{userInfo.username}</Descriptions.Item>
          <Descriptions.Item label="状态">{userInfo.roleState ? "启用" : "禁用"}</Descriptions.Item>
          <Descriptions.Item label="角色">{roleName}</Descriptions.Item>
          <Descriptions.Item label="管辖区域">{userInfo.region}</Descriptions.Item>
          <Descriptions.Item label="注册时间">{userInfo.joinDate}</Descriptions.Item>
        </Descriptions>
      </Card>
      <Card title="修改账号信息" style={{ width: 400, boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px" }}>
        <Form autoComplete="off" onFinish={submitForm} form={form}>
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              { required: true, message: "用户名不能为空" },
              { min: 2, max: 9, message: "用户名长度不符合" },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="旧密码"
            name="oldPassword"
            rules={[
              { required: true, message: "旧密码不能为空" },
              { min: 6, max: 12, message: "密码长度不符合" },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="新密码"
            name="newPassword"
            rules={[
              { required: true, message: "新密码不能为空" },
              { min: 6, max: 12, message: "密码长度不符合" },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirmPassword"
            rules={[
              { required: true, message: "请再次确认密码" },
              { min: 6, max: 12, message: "密码长度不符合" },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Button type="primary" htmlType="submit" loading={submitBtn.loading}>
              {submitBtn.text}
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

const connector = connect((state: userType) => ({ userInfo: state }), {
  updateUserInfo,
})

export default connector(UserCenter)
